<template>
  <div id="app">
    <nav>
      <el-container style="height: 100%; border: 1px solid #eee">
        <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
          <el-menu :default-openeds="['1', '3']"
                   class="el-menu-vertical-demo"
                   @select="menuSelect">

            <el-menu-item index="1">
              <i class="el-icon-menu"></i>
              <span slot="title">员工</span>
            </el-menu-item>

            <el-menu-item index="2">
              <i class="el-icon-menu"></i>
              <span slot="title">查询员工信息</span>
            </el-menu-item>

            <el-menu-item index="3">
              <i class="el-icon-menu"></i>
              <span slot="title">更改头像</span>
            </el-menu-item>

          </el-menu>
        </el-aside>

        <el-container>
          <el-header style="text-align: right; font-size: 12px;">
            <img style="position: relative;height: 40px;width: 40px;right:5px;top:10px" :src="headPhoto">
            <el-dropdown>
              <span>{{login}}</span>
              <i class="el-icon-setting" style="margin-right: 15px"></i>
              <el-dropdown-menu slot="dropdown">
                <!-- 下拉框绑定事件需要加上.native -->
                <el-dropdown-item @click.native="loginDept">登录</el-dropdown-item>
                <el-dropdown-item @click.native="loginDept">注销</el-dropdown-item>
                <el-dropdown-item @click.native="register">注册</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-header>

          <el-main>
            <div v-if="loginView===false && registerView===false">
              <router-view/>
            </div>
            <el-dialog
                :visible.sync="loginView"
                width="80%"
                :modal="false">
              <LoginVue :loginurl="navigation" @closeWind="closeLogin"></LoginVue>
            </el-dialog>
            <el-dialog
                :visible.sync="registerView"
                width="80%"
                :modal="false">
              <RegisterVue :registerurl="navigation" @closeWind="closeRegister"></RegisterVue>
            </el-dialog>
          </el-main>

        </el-container>
      </el-container>

    </nav>
  </div>
</template>
<script>
import LoginVue from "@/components/LoginVue.vue";
import RegisterVue from "@/components/Register.vue";

export default {
  name: "MainPage",
  components:{
    LoginVue,
    RegisterVue
  },
  data(){
    return {
      login:'',
      loginView:false,
      registerView:false,
      navigation:'',
      headPhoto : 'https://p2.ssl.qhimgs1.com/sdr/400__/t0101908ca4cdd81b4c.jpg'
    }
  },
  mounted() {
    this.login = this.$store.state.username
    if (this.login == ''||this.login==null|| this.login=='null'){
      this.login = '请登录'
    }
  },
  methods:{
    menuSelect(index){
      let username = sessionStorage.getItem('username')
      console.log(username)
      if (username!=null && username!='null'){
        if (index == 1){
          this.navigation = '用户'
          this.$router.push("/dept")
        }else if(index == 2){
          this.navigation = '查询'
          this.$router.push("/deptinfo")
        }else {
          this.navigation = '头像'
          this.$router.push("/head")
        }
      }else{
        this.$message.warning("请先登录")
      }
    },
    loginDept(){
      this.loginView=true
    },
    closeLogin(){
      this.headPhoto=this.$store.state.headphoto
      console.log(this.headPhoto)
      this.loginView=false
    },
    cancel(){
      this.$store.state.username=''
    },
    register(){
      this.registerView=true
    },
    closeRegister(){
      this.registerView=false
    },
  }
}
</script>
<style>
.el-header {
  background-color: #B3C0D1;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}
</style>
